<template>
	<view class="box">
		<view class="view-content" :style="'top: -'+height+'px;'">
			<view class="function-button">
				<view class="fanhui" @click="retur">
					<!-- <image src="../../static/jiahao.png" mode=""></image> -->
					<u-icon name="arrow-left"></u-icon>
				</view>
			</view>
			<u-swiper :list="schoolImg" height="384" @change="e =>currentBannerNum = e.current" :circular="true"
				indicatorStyle="right: 20rpx">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentBannerNum + 1 }}/{{ schoolImg.length }}</text>
				</view>
			</u-swiper>

			<view class="decorate"></view>


			<view class="box-1 view-desc">
				<view style="height: 20rpx;"></view>
				<view class="title-1">
					<text>￥26.9/套</text>
				</view>
				<view class="title-2">世达沾塑柄欧式活动扳手150MM(6寸)/47249</view>
				<view class="title-3">优质碳钢制造，头部热处理，全手柄沾塑，激光刻度指示。</view>
				<view class="title-4">商品编号 123456 <image src="../../static/bianhao.png" mode=""></image>
				</view>
				<view style="height: 20rpx;"></view>
			</view>


			<view style="margin-top:30rpx;" class="view-desc box-2">
				<view style="height: 5rpx;"></view>
				<view class="guige">
					<text>规格</text>
					<text>已远：8000型-精品/062800</text>
					<image class="image-2" src="../../static/right.png"></image>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="peisong">
					<text>配送</text>
					<image class="img-1" src="../../static/dingwei.png" mode=""></image>
					<text> 北京 </text>
					<image class="img-2" src="../../static/right.png"></image>
				</view>
				<view style="height: 10rpx;"></view>
			</view>

			<view class="detail">
				商品详情
			</view>


			<view class="box-4">
				<view class="detail-img">
					<image v-for="i in 3" :src="img" mode=""></image>
				</view>
			</view>

			<!-- 底部固定 -->
			<view class="footer">
				<view class="cell">
					<image class="kefu" src="../../static/kefu2.png" mode=""></image>
					<text>客服</text>
				</view>
				<view class="btn">
					<!-- <u-button text="加入购物车" type="primary" shape=""></u-button> -->
					<u-button @click="show = true" text="加入购物车"
						color="linear-gradient(to bottom, rgb(229, 0, 4), rgb(255, 101, 114))">
					</u-button>
				</view>
			</view>

			<!-- 弹出层 -->
			<u-popup :closeable="true" :round="10" :show="show" @close="close" @open="open">
				<view class="popup">
					<view class="goods">
						<image src="../../static/banyun.png" mode=""></image>
						<view class="introduce">
							<view class="text-1">世达沾塑柄欧式活动扳手150MM(6寸)/47249</view>
							<view class="text-2"> <text>￥29</text> <text>.6/套</text> </view>
							<view class="text-3">商品编号 012512 <image src="../../static/bianhao.png" mode=""></image>
							</view>
							<view class="text-4">件装数量 1件装</view>
						</view>
						<view class="view-pop-title">
							购买数量<u-number-box v-model="num" :min="1" @change="numChange"></u-number-box>
						</view>
						<view class="specification">
							<view class="title">选择规格</view>
							<view @click="style = i.id" :class="{'stateStyle': style == i.id}" v-for="i in list" :key="i.id" class="item">{{i.name}}</view>
						</view>
						
						<view class="btn2">
							<!-- <u-button text="加入购物车" type="primary" shape=""></u-button> -->
							<u-button text="加入购物车"
								color="linear-gradient(to bottom, rgb(229, 0, 4), rgb(255, 101, 114))">
							</u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:1,
				style:1,
				value: 0,
				show: false,
				img: '../../static/banyun.png',
				schoolevaluate: [{
					content: "太新鲜了吧，好喜欢啊！！！这是我网购最好的一次， 会一直回购冲冲冲！！！ ",
					createTime: "11.15 20:22",
					praise: '105',
					number: '2214',
					nickName: "山药",
					headUrl: "https://qljy-resource.oss-cn-beijing.aliyuncs.com/2022/10/24/7c8206df13de4fb2b8a6a5169da7d052.jpg",
				}],
				currentBannerNum: 0,
				scrollTop: 0,
				height: '',
				schoolImg: [
					'https://qljy-resource.oss-cn-beijing.aliyuncs.com/2022/09/15/d7b5132d33294362be19db1674809170.jpg',
					'https://qljy-resource.oss-cn-beijing.aliyuncs.com/2022/09/15/d7b5132d33294362be19db1674809170.jpg'
				],
				list:[
					{name:'700mm*800mm约47kg/水',id:1},
					{name:'700mm*800mm约57kg/水',id:2},
					{name:'700mm*800mm约67kg/水',id:3},
					{name:'700mm*800mm约77kg/水',id:4}
				]
			}
		},

		created() {
			uni.getSystemInfo({
				complete: (res) => {
					this.height = res.statusBarHeight;
					console.log(this.height);
				}
			})
		},

		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			numChange() {
			
			},
			retur(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.box {
		.view-content {
			position: relative;

			.indicator-num {
				padding: 2rpx 0;
				background-color: #b2b2b2;
				border-radius: 100rpx;
				width: 80rpx;
				@include flex;
				justify-content: center;
				margin-bottom: 30rpx;

				&__text {
					color: #f8f8f8;
					font-size: 22rpx;
				}

			}

			.function-button {
				width: 100%;
				// background-color: #838383;
				position: absolute;
				top: 60rpx;
				z-index: 9;
				position: fixed;

				.right {
					width: 50rpx;
					height: 50rpx;
					float: right;
					margin-right: 20rpx;
				}

				.fanhui {
					width: 50rpx;
					height: 50rpx;
					// background-color: #666666;
					border-radius: 50%;
					float: left;
					margin-left: 20rpx;
					text-align: center;
				}
			}
		}

		.decorate {
			height: 30rpx;
			width: 100%;
			background-color: #f1f1f1;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			bottom: 20rpx;
		}

		.view-desc {
			width: 95%;
			margin: auto;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			position: relative;
			bottom: 20rpx;

		}

		.box-1 {
			view {
				margin-top: 10rpx;
			}

			.title-1 {
				margin-left: 20rpx;

				text {
					font-size: 32rpx;
					color: #E50014;
					font-weight: 500;
				}
			}

			.title-2 {
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 28rpx;
			}

			.title-3 {
				font-size: 26rpx;
				color: #666;
				margin-left: 20rpx;
			}

			.title-4 {
				font-size: 26rpx;
				color: #666;
				margin-left: 20rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
					position: relative;
					top: 5rpx;
				}
			}
		}

		.box-2 {
			.guige {
				// margin-top: 40rpx;
				position: relative;
				top: 8rpx;
				margin-left: 20rpx;
			}

			view {
				// margin-bottom: 10rpx;
				margin: 10rpx 0 20rpx 0;

				text {
					&:nth-child(1) {
						color: #a8a8a8;
						font-size: 26rpx;
					}

					&:nth-child(2) {
						font-size: 26rpx;
						display: inline-block;
						margin-left: 15rpx;
					}
				}

				.image-2 {
					width: 12rpx;
					height: 20rpx;
					float: right;
					margin-top: 20rpx;
					margin-right: 10rpx;
				}
			}

			.peisong {
				margin-left: 20rpx;

				.img-1 {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
					position: relative;
					top: 5rpx;
				}

				.img-2 {
					width: 12rpx;
					height: 20rpx;
					float: right;
					margin-top: 20rpx;
					margin-right: 10rpx;
				}

			}
		}

		.detail {
			text-align: center;
		}

		.box-4 {
			width: 95%;
			margin: auto;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			margin-top: 30rpx;


			.detail-img {
				margin-top: 30rpx;

				image {
					width: 100%;
				}
			}
		}

		.footer {
			.view-item {
				display: flex;
				padding: 0 14rpx;
				align-items: center;
				flex-direction: column;
			}

			.image {
				width: 38rpx;
				height: 38rpx;
				margin-top: 10rpx;
			}

			.text-collect {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				display: block;
				text-align: center;
				margin-top: 15rpx;
			}

			width: 100vw;
			height: 100rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-around;

			.cell {
				width: 100rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #838383;
				}

				.kefu {
					width: 43rpx;
					height: 43rpx;
					margin-top: 8rpx;
				}
			}

			.btn {
				margin-right: 2rpx;
				width: 60%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.popup {
			height: 1192rpx;

			.goods {
				margin-top: 72rpx;
				height: 260rpx;

				image {
					width: 260rpx;
					height: 260rpx;
				}

				.introduce {
					// border: 1rpx solid rebeccapurple;
					position: relative;
					top: -20rpx;
					display: inline-block;
					margin-left: 20rpx;
					width: 318rpx;
					height: 260rpx;

					view {
						display: inline-block;
					}

					.text-1 {
						font-size: 28rpx;
						font-weight: bold;
					}

					.text-2 {
						margin-top: 20rpx;

						text {
							&:nth-child(1) {
								color: #E50014;
								font-size: 30rpx;
							}

							&:nth-child(2) {
								color: #E50014;
								font-size: 24rpx;
							}
						}
					}

					.text-3 {
						margin-top: 20rpx;
						font-size: 26rpx;
						color: #666;

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}

					.text-4 {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #666;
					}
				}
				.count {
					
				}
				
				.view-pop-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					display: flex;
					margin-bottom: 20rpx;
					justify-content: space-between;
					align-items: center;
					margin: 0 20rpx;
				}
				
				.specification {
					margin: 0 20rpx;
					// background-color: #838383;
					.title {
						margin: 20rpx 0;
					}
					.item {
						display: inline-block;
						padding: 10rpx 20rpx;
						border: 1rpx solid #999;
						font-size: 26rpx;
						border-radius: 10rpx;
						margin-top: 20rpx;
					}
					.stateStyle {
						border: 1rpx solid #E50014 !important;
						color: #E50014;
					}
				}
				
				.btn2 {
					width: 60%;
					margin: auto;
					border-radius: 20rpx;
					height: 80rpx;
					position: absolute;
					bottom:20rpx;
					left: 20%;
				}
			}
		}
	}
</style>
